import React, {Component} from 'react';
import {
    Flex,
    Icon,
    Tabs,
    NavBar,
    Popover,
    WingBlank,
    WhiteSpace,
    ActionSheet,
    Carousel,
    Modal,
    Grid,
    List,
    Button,
    Toast,
} from 'antd-mobile';
import { connect } from 'dva';
import Moment from 'moment';
import NoLazyImg from '../../components/NoLazyImg/NoLazyImg';
import MyListView from '../../components/MyListView/MyListView';
import MyListViewLz from '../../components/MyListViewLz/MyListViewLz';
import {routerRedux} from "dva/router";
import {shopOpenGroup} from './shopOpenGroup.less';
import GroupOrderItem from "./groupOrderItem";
import  caidan from'../../assets/svg/caidan.svg';
import updown1 from '../../assets/svg/updown1.svg';
import updown2 from '../../assets/svg/updown2.svg';
import updown3 from '../../assets/svg/updown3.svg';
import {goto_search_title} from "../search/GotoSearch.less";
import {fenlei, noguanzhu} from "../find/findIndex.less";
import {goods_search_header} from "../search/GoodsSearch.less";
import NavTopBar from '../../components/NavTopBar/NavTopBar';

const Item = Popover.Item;




class GroupOrder extends Component {
    constructor(props){
        super(props);
        this.state={
            modal:false,
            tabs:[],
            value:""
        };

        this.AlloyTouch = null;
        this.state = "";
        this.page=0;
        this.tabs=[{title:"全部",state:""},{title:"拼团中",state:"10"},{title:"拼团成功",state:"20"},{title:"拼团失败",state:"30"}];
    }

    componentDidMount(){
        this.refresh();
    }

    refresh = () => {
        return this.props.dispatch({ type: 'shopOpenGroup/myGroupEFF',obj:{state:this.state,pageNo:1} });
    }

    loadMore = () => {
        return this.props.dispatch({ type: 'shopOpenGroup/myGroupEFF', obj:{state:this.state,pageNo:this.props.shopOpenGroup.pageNo+1} });
    }

    getAlloyTouch = (AT) =>{
        this.AlloyTouch = AT;
    };

    renderContent = tab =>{
        const {dispatch} = this.props;
        const {myGroupList=[]} = this.props.shopOpenGroup;
        return <div style={{height:"100%"}}>
            {myGroupList[0]?<MyListViewLz
                style={{height:"100%"}}
                kid={tab.typeId}
                cc={true}
                getAlloyTouch={ this.getAlloyTouch }
                refresh={ this.refresh }
                loadMore={ this.loadMore }
                hasMore={ this.props.shopOpenGroup.pageNo * this.props.shopOpenGroup.pageSize < this.props.shopOpenGroup.totalRows  }
                // itemWrapperClass={ goods_list }
                // bottomStyle={ layoutType == true ? {} : { marginTop:"0.2rem", paddingTop:'0rem' } }
                renderItem={(v,i,a)=>{
                    return <GroupOrderItem dataItem={v} refresh={this.refresh} key={i} dispatch={dispatch}></GroupOrderItem>
                }}
                data={ myGroupList }>
            </MyListViewLz>:<div style={{width: "100%", height: "8rem", background: "#f6f6f6"}}>
                <img src={ require('../../assets/img/noGoods.png')} style={{display: "block", margin: "3rem auto 0"}} />
                <p style={{fontSize: ".3rem", padding: ".2rem 0 .3rem", textAlign: "center", color: "#b9b9b9"}}>当前暂无商品...</p>
            </div>}
        </div>


    }

    render() {
        const {dispatch} = this.props;
        return ( <Flex direction="column" className={shopOpenGroup} style={{height:"100%"}}>
                <NavTopBar title="我的拼团" isBlack={1} jumpUrl={`/my`} dispatch={this.props.dispatch} rightContent={[
                    <Icon key="0" type="search" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/filterOrder/1"})) } style={{ marginRight: '0.32rem' }} />,
                    <Icon key="1" type="xiaoxi" onClick={ e => this.props.dispatch(routerRedux.push({pathname: "/messagesCenter"})) }/>,
                ]}/>
                <Tabs tabs={this.tabs} swipeable={false} initialPage={0} page={this.page}  onChange={(tab, index) => {
                    let state = tab.state ;
                    this.page=index;
                    this.state =state ;
                    this.refresh();

                }} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
                    {this.renderContent}
                </Tabs>

            </Flex>

        )


    }
}

export default connect(({ shopOpenGroup }) => ({ shopOpenGroup}))(GroupOrder);